<template>
  <div class="live-status-box">
    <span class="live-status-title">正在直播/即将开始</span>
    <div class="data_overview_tag" />
    <div class="active-lives-box">
      <template v-if="living.length > 0">
        <div v-for="(item, k) in living" :key="k" class="liveStatusItemText">
          <div class="round" :style="getBgColor(k)">
            <div style="margin-top: 2px">
              <span class="statusNumber">{{ k + 1 }}</span>
            </div>
          </div>
          <span class="liveStatusItemTitle">{{ trunketTitle(item.title) }}</span>
          <div v-if="item.status === 'living'" class="status-living">
            <span>正在直播</span>
          </div>
          <div v-else class="status-wating">
            <span>即将开始</span>
          </div>
        </div>
      </template>
      <div v-else>
        <span>暂无直播数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { liveList } from '@/api/lives'

export default {
  data() {
    return {
      queryLiveData: {
        start: 1,
        length: 14,
        order: `desc`,
        type: `live`
      },
      lives: [],
      count: 0,
      living: []
    }
  },
  computed: {
    ...mapGetters([
      'isRefresh'
    ])
  },
  watch: {
    'isRefresh'(n, o) {
      if (n) {
        this.refreshLivingData()
      }
    }
  },
  mounted() {
    this.refreshLivingData()
  },
  methods: {
    // 随机生成颜色
    // getRandomBgColor() {
    //   return { background: '#' + Math.random().toString(16).slice(2, 8) }
    // },

    // 颜色
    getBgColor(k) {
      if (k % 4 === 0) { return { background: '#B644FF' } }
      if (k % 4 === 1) { return { background: '#2274E7' } }
      if (k % 4 === 2) { return { background: '#FFB800' } }
      if (k % 4 === 3) { return { background: '#42D0EE' } }
    },
    // 刷新直播数据
    refreshLivingData() {
      this.lives = []
      liveList(this.queryLiveData).then((resp) => {
        this.lives = resp.data
        for (var i = 0; i < resp.data.length; i++) {
          if (resp.data[i]['status'] === 'living' || resp.data[i]['status'] === 'waiting') {
            this.living.push(resp.data[i])
          }
        }
      })
    },
    trunketTitle(title) {
      if (title.length > 22) {
        return title.substring(0, 21) + '...'
      }
      return title
    }
  }
}
</script>

<style lang="scss" scoped>
.live-status-box {
  width: 701px;
  height: 249px;
  background: #FFFFFF;
  border-radius: 10px;
  top: 13px;
  left: 1175px;
  position: relative;
  margin: 0%;
}

.data_overview_tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  top: 29px;
  position: absolute;
}

.live-status-title {
  width: 207px;
  height: 24px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  position: absolute;
  top: 27px;
  left: 44px;
}

// 编号圆
.round {
  width: 27px;
  height: 27px;
  background: #B644FF;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
}

.liveStatusItemText {
  display: flex;
  height: 30px;
  width: 701px;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 10px;
  margin-left: 10px;
}

.active-lives-box {
  top: 82px;
  width: 670px;
  height: 140px;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  position: relative;
  left: 23px;
  flex-direction: column;
  justify-content: flex-start;
}

.statusNumber {
  width: 9px;
  height: 15px;
  font-size: 20px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
}

.status-living {
  width: 100px;
  height: 30px;
  background: #ffd0d0;
  // opacity: 0.47;
  border-radius: 4px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  white-space: nowrap;

  span {
    height: 16px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    font-style: italic;
    color: #e70000;
    text-align: center;

  }
}

.status-wating {
  width: 100px;
  height: 30px;
  background: #d0ffd4;
  // opacity: 0.36;
  border-radius: 3px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  white-space: nowrap;

  span {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    font-style: italic;
    color: #02ca13;
    text-align: center;
    opacity: 1;
  }
}

.liveStatusItemTitle {
  width: 406px;
  font-size: 18px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #6D7A8E;
  position: relative;
  margin-left: 15px;
}
</style>
